﻿


Ext.define('I2R.view.userformpanel', {
    extend: 'Ext.form.Panel',
    alias: 'widget.i2ruserformpanel',
    bodyCls: 'padd-up',
    layout: {
        type: 'hbox',
        align: 'stretch'
    },
    border: false,
    fieldDefaults: {
        labelAlign: 'left',
        labelWidth: 150,
        labelSeparator: ''
    },
    skipLoad: false,
    loadId: -1,
    userEdit: false,
    initComponent: function () {

        var me = this;
        var rolestore = Ext.data.StoreManager.lookup('roles');
        var departmentstore = Ext.data.StoreManager.lookup('departments');

        me.items = [
            {
                xtype: 'panel', title: 'User profile', bodyCls: 'padd-up',
                items: [
                        { xtype: 'textfield', name: 'Id', fieldLabel: '#', readOnly: true },
                        { xtype: 'textfield', name: 'Username', fieldLabel: 'Username', readOnly: !me.skipLoad, allowBlank: !me.skipLoad },
                        { xtype: 'textfield', name: 'NewPassword', fieldLabel: 'Password', inputType: 'password' },
                        { xtype: 'textfield', name: 'PasswordConfirm', fieldLabel: 'Confirm password', inputType: 'password' },
                        {
                            xtype: 'combobox',
                            name: 'RoleId',
                            fieldLabel: 'Role',
                            store: rolestore,
                            displayField: 'Name',
                            valueField: 'Id',
                            readOnly: !me.userEdit
                        }
                ]
            },
            { xtype: 'panel', width: 20, border: false },
            {
                xtype: 'tabpanel',
                flex: 1,
                items: [
                        {
                            xtype: 'panel', title: 'Employee details', bodyCls: 'padd-up', flex: 1,
                            items: [
                                { xtype: 'panel', title: 'Personal information', layout: 'anchor', bodyCls: 'padd-up', items: [
                                { xtype: 'textfield', name: 'Firstname', fieldLabel: 'Firstname' },
                                { xtype: 'textfield', name: 'Lastname', fieldLabel: 'Lastname' },
                                { xtype: 'textfield', name: 'Email', fieldLabel: 'E-mail' },
                                { xtype: 'textfield', name: 'Title', fieldLabel: 'Title' },
                                { xtype: 'combobox', name: 'DepartmentId', fieldLabel: 'Department', store: departmentstore,
                                    displayField: 'Name',
                                    valueField: 'Id',
                                    readOnly: !me.userEdit
                                }
                                ]
                                }
                            ]
                        },
                     { xtype: 'panel', layout: 'anchor', title: 'Address details', bodyCls: 'padd-up', flex: 1,
                         items: [
                            { xtype: 'textfield', name: 'Address', fieldLabel: 'Address', anchor: '100%' },
                            { xtype: 'fieldcontainer', layout: 'hbox', anchor: '100%', fieldLabel: 'Zip / City',
                                items: [
                                    { xtype: 'textfield', name: 'Zip', width: 50 },
                                    { xtype: 'splitter' },
                                    { xtype: 'textfield', name: 'City', flex: 1 }
                             ]
                            },
                             { xtype: 'panel', border: false, height: 20 },
                                {
                                    xtype: 'panel', bodyCls: 'padd-up', title: 'Phone numbers', layout: 'anchor', items: [
                                    {
                                        xtype: 'fieldcontainer', layout: 'hbox', fieldLabel: '', anchor: '100%',
                                        items: [{ xtype: 'combobox', flex: 1, store: 'phonetypes', displayField: 'Name', valueField: 'Id',
                                            name: 'PhoneType1',
                                            trigger1Cls: 'x-form-clear-trigger',
                                            trigger2Cls: 'x-form-arrow-trigger',
                                            onTrigger1Click: function () {
                                                this.clearValue();
                                                this.store.clearFilter(false);
                                            },
                                            queryMode: 'local'
                                        }, { xtype: 'splitter' }, { xtype: 'textfield', name: 'Phone1', flex: 1}]
                                    },
                                    {
                                        xtype: 'fieldcontainer', layout: 'hbox', fieldLabel: '', anchor: '100%',
                                        items: [{ xtype: 'combobox', flex: 1, store: 'phonetypes', displayField: 'Name', valueField: 'Id',
                                            name: 'PhoneType2',
                                            trigger1Cls: 'x-form-clear-trigger',
                                            trigger2Cls: 'x-form-arrow-trigger',
                                            onTrigger1Click: function () {
                                                this.clearValue();
                                                this.store.clearFilter(false);
                                            }
                                        }, { xtype: 'splitter' }, { xtype: 'textfield', name: 'Phone2', flex: 1}]
                                    },
                                    {
                                        xtype: 'fieldcontainer', layout: 'hbox', fieldLabel: '', anchor: '100%',
                                        items: [{ xtype: 'combobox', flex: 1, store: 'phonetypes', displayField: 'Name', valueField: 'Id',
                                            name: 'PhoneType3',
                                            trigger1Cls: 'x-form-clear-trigger',
                                            trigger2Cls: 'x-form-arrow-trigger',
                                            onTrigger1Click: function () {
                                                this.clearValue();
                                                this.store.clearFilter(false);
                                            }
                                        }, { xtype: 'splitter' }, { xtype: 'textfield', name: 'Phone3', flex: 1}]
                                    },
                                    {
                                        xtype: 'fieldcontainer', layout: 'hbox', fieldLabel: '', anchor: '100%',
                                        items: [{ xtype: 'combobox', flex: 1, store: 'phonetypes', displayField: 'Name', valueField: 'Id',
                                            name: 'PhoneType4',
                                            trigger1Cls: 'x-form-clear-trigger',
                                            trigger2Cls: 'x-form-arrow-trigger',
                                            onTrigger1Click: function () {
                                                this.clearValue();
                                                this.store.clearFilter(false);
                                            }
                                        }, { xtype: 'splitter' }, { xtype: 'textfield', name: 'Phone4', flex: 1}]
                                    },
                                    {
                                        xtype: 'fieldcontainer', layout: 'hbox', fieldLabel: '', anchor: '100%',
                                        items: [{ xtype: 'combobox', flex: 1, store: 'phonetypes', displayField: 'Name', valueField: 'Id',
                                            name: 'PhoneType5',
                                            trigger1Cls: 'x-form-clear-trigger',
                                            trigger2Cls: 'x-form-arrow-trigger',
                                            onTrigger1Click: function () {
                                                this.clearValue();
                                                this.store.clearFilter(false);
                                            }
                                        }, { xtype: 'splitter' }, { xtype: 'textfield', name: 'Phone5', flex: 1}]
                                    }

                                ]
                                }

                       ]
                     }
                 ]
            }
        ];

        me.callParent(arguments);

        if (!me.skipLoad) {
            me.load({ url: '/User/Settings', method: 'GET', params: { Id: me.loadId} });
        }
    }
});

